<template>
  <div class="home">
    <el-container>
      <el-aside width="200px">
        <h2>scrcnet</h2>
        <!-- 侧边栏导航开始 -->
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#20222a"
          text-color="#fff"
          active-text-color="#ffd04b"
          unique-opened
        >
          <!-- 主页 -->
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-house"></i>
              <span>{{ $t("message.Home") }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-2" @click="$router.push('/home/page1')"
                >选项1</el-menu-item
              >
              <el-menu-item index="1-3" @click="$router.push('/home/page2')"
                >选项2</el-menu-item
              >
            </el-menu-item-group>
            <!-- <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template> -->
            <!-- <el-menu-item index="1-4-1">选项1</el-menu-item> -->
            <!-- </el-submenu> -->
          </el-submenu>
          <!-- 客户信息 -->
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-tickets"></i>
              <span>客户信息</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="2-1"
                @click="$router.push('/home/customer-ifo')"
                >基本资料</el-menu-item
              >
              <el-menu-item index="2-2">修改密码</el-menu-item>
              <el-menu-item
                index="2-3"
                @click="$router.push('/home/customer-details')"
                >详细资料</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <!-- 用户 -->
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>用户</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="$router.push('/home/user')"
                >基本资料</el-menu-item
              >
              <el-menu-item index="3-2" @click="$router.push('/home/page2')"
                >修改密码</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <!-- 外部网站 -->
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>外部网站</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="$router.push('/home/out-line')"
                >友情链接</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
        <!-- 侧边导航结束 -->
      </el-aside>
      <el-container>
        <!-- 头部开始 -->
        <el-header>
          <el-menu
            el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-menu-item index="2">消息中心</el-menu-item>
            <el-menu-item index="3"
              ><a href="https://www.ele.me" target="_blank"
                >更多</a
              ></el-menu-item
            >
            <el-submenu index="4">
              <template slot="title">我的资料</template>
              <el-menu-item index="4-1">我的资料</el-menu-item>
              <el-menu-item index="4-2">修改密码</el-menu-item>
              <hr />
              <el-menu-item index="4-3" @click="logout">退出</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-header>
        <!-- 头部结束 -->
        <!-- 主体开始  -->
        <el-main>
          <router-view></router-view>
        </el-main>
        <!-- 主体结束 -->
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1"
    };
  },
  created() {},
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 退出
    logout() {
      this.$router.push("/login");
      localStorage.clear();
      this.$message({
        message: "退出成功",
        type: "success"
      });
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  height: 100%;
}
.el-header {
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.el-aside {
  background-color: #20222a;
  color: #fff;
  h2 {
    text-align: center;
    line-height: 60px;
    padding-right: 40px;
  }
}

.el-main {
  background-color: #fff;
  margin: 15px;
}

.el-container {
  // margin-bottom: 40px;
  height: 100%;
}
/deep/.el-menu-vertical-demo {
  width: 100%;
}
</style>
